<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>丘北</title>
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/社会事业_style.css" />
	</head>
	<body>
		<!-- 	左侧标题栏开始 -->
		<div class="lbox" style="font-family: '楷体';">丘北</div>
		<!-- 	左侧标题栏结束 -->
		<!-- 导航栏开始 -->
		<div class="box" align="center">
			<ul class="nav">
				<li class="itme">
					<a href="./首页.html">主页</a>
				</li>
				<li class="itme">
					<a href="./旅游景点.html">旅游景点</a>
				</li>
				<li class="itme">
					<a href="./行政划分.html">行政划分</a>
				</li>
				<li class="itme">
					<a href="./地理环境.html">地理环境</a>
				</li>
				<li class="itme">
					<a href="./社会事业.html">社会事业</a>
				</li>
				<li class="itme">
					<a href="#">资源</a>
					<ul class="list">
						<li class="itmeTWO"><a href="./资源/自然资源.html">自然资源</a></li>
						<li class="itmeTWO"><a href="./资源/社会资源.html">社会资源</a></li>
					</ul>
				</li>
				<li class="itme">
					<a href="./留言板.html">给我们留言</a>
				</li>
			</ul>
		</div>
		<!-- 导航栏结束 -->
		<!-- 主体开始 -->
		<div class="center_card">
			<!-- 轮换效果开始 -->
			<div style="width: 100%;height: 600px;">
				<div class="title">
					<p>社会事业</p>
				</div>
				<div id="banner">
					<div class="img-list img-wrapper">
						<div class="img-box">
							<div class="info">
								<h3>丘北一中升旗仪式</h3>
							</div>
							<img src="../img/社会事业/丘北一中升旗仪式.png" alt="">
						</div>
						<div class="img-box">
							<div class="info">
								<h3>丘北县一中城北校区升旗仪式</h3>
							</div>
							<img src="../img/社会事业/丘北县一中城北校区升旗仪式.jpg" alt="">
						</div>
						<div class="img-box">
							<div class="info">
								<h3>丘北县一中勿忘国耻主题班会</h3>
							</div>
							<img src="../img/社会事业/丘北县一中勿忘国耻主题班会.png" alt="">
						</div>
						<div class="img-box">
							<div class="info">
								<h3>丘北一中运动会</h3>
							</div>
							<img src="../img/社会事业/丘北一中运动会2.png" alt="">
						</div>
						<div class="img-box">
							<div class="info">
								<h3>丘北县一中运动会</h3>
							</div>
							<img src="../img/社会事业/丘北县一中运动会1.jpg" alt="">
						</div>
						<div class="img-box">
							<div class="info">
								<h3>丘北县二中运动会</h3>
							</div>
							<img src="../img/社会事业/丘北县二中运动会1.jpg" alt="">
						</div>
						<div class="img-box">
							<div class="info">
								<h3>丘北县二中运动会</h3>
							</div>
							<img src="../img/社会事业/丘北县二中运动会2.jpg" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>丘北县二中运动会</h3>
							</div>
							<img src="../img/社会事业/丘北县二中运动会3.jpg" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>丘北县公共图书馆</h3>
							</div>
							<img src="../img/社会事业/丘北县公共图书馆.jpeg" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>普者黑杯职工运动会</h3>
							</div>
							<img src="../img/社会事业/普者黑杯职工运动会.webp" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>端午节龙舟赛等体育活动</h3>
							</div>
							<img src="../img/社会事业/端午节龙舟赛等体育活动.webp" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>丘北县西部片区初中学段“青蓝同辉”教师技能大赛活动</h3>
							</div>
							<img src="../img/社会事业/丘北县西部片区初中学段“青蓝同辉”教师技能大赛活动.jpg" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>普者黑君正太极苑开展太极健身站点骨干教练员师资培训</h3>
							</div>
							<img src="../img/社会事业/普者黑君正太极苑开展太极健身站点骨干教练员师资培训.jpg" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>丘北县人民医院</h3>
							</div>
							<img src="../img/社会事业/丘北县人民医院.webp" alt="">
						</div>
						<div class="img-box" id="last-img-box">
							<div class="info">
								<h3>丘北县中医院义诊</h3>
							</div>
							<img src="../img/社会事业/丘北县中医院义诊.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="btn-group">
				<button class="last btn">
					<svg t="1686471404424" class="icon left" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="2373" width="128" height="128">
						<path
							d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
							fill="" p-id="2374"></path>
					</svg>
				</button>
				<button class="next btn">
					<svg t="1686471404424" class="icon right" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="2373" width="128" height="128">
						<path
							d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
							fill="" p-id="2374"></path>
					</svg>
				</button>
			</div>
			<div class="one_div" style="margin-top: 250px;">
				<table>
					<tr>
						<td>
							<div class="title_div"><img src="../img/社会事业/教育事业.png" />教育事业</div>
							<div class="one_div_div">
								<p>2022年，丘北县共有306所学校，比上年增加6所，其中，中等职业教育3所，普通中学23所，普通小学122所，普通小学比上年增加2所，特殊教育1所，幼儿园157所，幼儿园比上年增加4所。
								</p>
								<p>各类中等职业教育（含技工学校）招生2578人，在校生4502人，毕业生703人。普通中学招生13761人，在校生38912人，毕业生11417人。普通小学招生7680人，在校生54283人，毕业生9383人。幼儿园招收幼儿9295人，在园（班）幼儿25085人，完成学前教育的儿童7638人。
								</p>
								<p>共有教职工7429人，其中，专任教师6698。中等职业教育教职工164人，专任教师146人；普通中学教职工2728人，专任教师2663人；普通小学教职工2907人，专任教师2868人；特殊教育教职工54人，专任教师54人；幼儿园教职工1576人，专任教师967人。
								</p>
								<p>学前教育毛入园率94.09%，小学学龄儿童毛入学率106.52%，初中阶段教育毛入学率105.8%，高中阶段教育毛入学率84.39%，九年义务教育巩固率104.75%。
								</p>
							</div>
						</td>
						<td>
							<div class="title_div"><img src="../img/社会事业/医疗卫生.png" />医疗卫生</div>
							<div class="one_div_div">
								<p>2022年，丘北县共有医疗卫生机构156个，其中，医院6个，在医院中有公立医院2个，民营医院4个；基层医疗卫生机构146个，其中乡镇卫生院13个，社区卫生服务中心（站）3个，门诊部（所）31个，村卫生室99个；专业公共卫生机构4个，其中疾病预防控制中心1个，卫生监督所（中心）1个，保健院1个，皮肤防疫站1个。医疗卫生机构拥有床位数2445张，其中，医院1579张，乡镇卫生院530张。卫生技术人员2649人，其中执业（助理）医师712人，注册护士1289人。总诊疗人次180.3万人次，出院人数[7]10.61万人。累计报告接种新型冠状病毒疫苗23.02万剂次。
								</p>
							</div>
						</td>
						<td>
							<div class="title_div"><img src="../img/社会事业/社会保障.png" />社会保障</div>
							<div class="one_div_div">
								<p>2022年，丘北县城镇新增就业6125人，比上年增加3418人，增长126.27%。城镇登记失业人数1872人，城镇登记失业率为5.40%。</p>
								<p>2022年，丘北县参加城镇职工基本养老保险人数29964人，比上年增加1638人。其中，参保职工22877人，参保离退休人员7087人。参加城乡居民基本养老保险人数307601人，增加1216人。参加基本医疗保险人数524514人，增加1280人。其中，参加职工基本医疗保险人数20143人，增加42人；参加城乡居民基本医疗保险人数504371人，增加1238人。参加失业保险人数15379人，增加1114人。参加工伤保险人数24478人，增加715人。其中，参加工伤保险的农民工3875人，增加935人。参加生育保险人数14438人。
								</p>
								<p>享受城市最低生活保障19766人次，享受农村最低生活保障499912人次，享受农村特困人员救助供养9385人次，临时救助8530人次，领取高龄津贴补助97307人次。国家抚恤、补助退役军人和其他优抚对象48455人次。
								</p>
								<p>养老服务机构3个，投入使用养老床位160张。销售社会福利彩票2838.78万元。</p>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<!-- 轮换效果结束 -->
			<!-- 文字板块开始 -->
			<div class="one_div">
				<table>
					<tr>
						<td>
							<div class="title_div"><img src="../img/社会事业/科学技术-29.png" />科学技术</div>
							<div class="one_div_div">
								<p>全年获专利授权31件；年末发明专利有效7件。年末共有科技型中小企业34户，新增3户；高新技术企业3户，新认定1户。有院士专家工作站2个，科技特派团1个，获认定科技特派员6人，获认定“三区”科技人才5人。
								</p>

							</div>
						</td>
						<td>
							<div class="title_div"><img src="../img/社会事业/体育事业.png" />体育事业</div>
							<div class="one_div_div">
								<p>全面推进全民健身，恢复举办普者黑杯职工运动会、端午节龙舟赛等体育活动，云南省青少年皮划艇比赛等多项省级赛事在丘举办。全年运动员参加全省比赛获奖牌数5枚。全年销售体育彩票5184万元，比上年增长17.7%。
								</p>
							</div>
						</td>
						<td>
							<div class="title_div"><img src="../img/社会事业/文化事业.png" />文化事业</div>
							<div class="one_div_div">
								<p>文化事业繁荣发展。年末全县共有公共图书馆1个，档案馆1个，文化馆1个，文化和旅游广播电视服务中心12个。全县广播、电视节目综合人口覆盖率都达到100.0%。首次以市场化运作方式举办“花脸节”，全网点击量10.29亿人次,《跳月欢歌》获全省“彩云之南等你来”夜间群众文艺演出展演展示活动“优秀广场舞”称号。
								</p>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<!-- 文字板块结束-->
		<!-- 轮换js开始 -->
		<script>
			const imgListOne = document.querySelector('.img-list')
			// 获取图片类数组，并将其转化为数组
			let imgBoxList = Array.prototype.slice.call(document.querySelectorAll('.img-list .img-box'))
			const imgBoxCount = imgBoxList.length
			const root = document.documentElement;
			const btnGroup = document.querySelector('.btn-group')
			const lastBtn = document.querySelector('.last')
			const nextBtn = document.querySelector('.next')
			const lastImgBox = document.getElementById('last-img-box')

			// 获取--post-spacing和--post-size的值
			const postSpacing = Number(getComputedStyle(root).getPropertyValue('--post-spacing').replace("vw", ""));
			const postSize = Number(getComputedStyle(root).getPropertyValue('--post-size').replace("vw", ""));

			// 根据图片的数量动态获取img-list的宽度
			let imgListLength = (postSize + postSpacing) * imgBoxCount
			console.log(imgListLength);
			// 根据图片的数量动态获取img-box的宽度
			const imgBoxLength = postSize + postSpacing

			let index = 0
			let indexOne = 1
			let timer = null
			let animationTime = 0.5

			// 初始化数组中元素的的顺序，将最后一张图片放在第一位与html部分图片展示位置一致
			imgBoxList.unshift(imgBoxList.pop())
			// 设置imgListOne动画时间
			imgListOne.style.transition = animationTime + 's ease'
			// 设置按钮出现时间
			setTimeout(function() {
				btnGroup.style.opacity = '1'
				btnGroup.style.bottom = '5%'
			}, animationTime * 1000)
			// 点击事件
			function cilckFun(flag) {
				//下一张 next
				if (flag == 'next') {
					index--
					console.log(index);
					// 因为右边没有显示的图片比较多，所以可以直接先整体向左移动
					imgListOne.style.left = imgBoxLength * index + "vw";
					setTimeout(function() {
						imgListOne.style.transition = 'none'
						// 当点击下一个累计达到图片数量时，相当于要回到原点，则重置变量和位置
						if (Math.abs(index) == imgBoxCount) {
							index = 0
							imgListOne.style.left = 0
							imgBoxList.forEach(item => {
								if (item.id == 'last-img-box') {
									item.style.transform = `translateX(-160.68vw)`
								} else {
									item.style.transform = 'none'
								}
							});
						} else {
							// 当第一张图片为last-img-box时，说明已经跑完了一轮，则将其放在最后的位置，初始状态其为-160.68vw
							if (imgBoxList[0].id == 'last-img-box') {
								lastImgBox.style.transition = 'none'
								lastImgBox.style.transform = 'translateX(0px)'
							} else if (index >= 0) {
								/*  
								    这种情况是为了解决在点击完第last，再点击next时造成的bug问题，其实就是回退，再点击last之前
								    没有加transform属性，点击last以后则添加了transform属性，再次点击next按钮后应该不加transform
								*/
								imgBoxList[0].style.transform = 'none'
							} else {
								// 正常情况下，点击next，则将最左侧的图片移到最后
								imgBoxList[0].style.transform = 'translateX(160.68vw)'
							}
						}
						// 模拟移动情况，将最左侧的图片（元素）移动到最后
						imgBoxList.push(imgBoxList.shift())
					}, animationTime * 1000)
				} else {
					// 上一张 last
					index++
					console.log(index);
					// 模拟移动情况，把最右侧的图片（元素）移动到最前
					imgBoxList.unshift(imgBoxList.pop())
					// 因为左侧图片只会有一张，所以需要先移动图片到左侧，再进行imgListOne的移到
					if (imgBoxList[0].id == 'last-img-box' && index != 0) {
						// 当第一张图片为last-img-box时，说明已经跑完了一轮，此时相对于一开始的位置为-321.36vw
						imgBoxList[0].style.transform = 'translateX(-321.36vw)'
					} else if (index < 0) {
						// 这种情况与点击next按钮出现的回退现象一致
						imgBoxList[0].style.transform = 'none'
					} else {
						// 正常情况下，点击last，则将最右侧的图片移到最前
						imgBoxList[0].style.transform = 'translateX(-160.68vw)'
					}
					imgListOne.style.left = imgBoxLength * index + "vw";
					lastImgBox.style.transition = 'none'
					// 当点击下一个累计达到图片数量时，相当于要回到原点，则重置变量和位置
					if (Math.abs(index) == imgBoxCount) {
						index = 0
						setTimeout(function() {
							imgListOne.style.transition = 'none'
							imgListOne.style.left = 0
							imgBoxList.forEach(item => {
								if (item.id == 'last-img-box') {
									item.style.transform = 'translateX(-160.68vw)'
								} else {
									item.style.transform = 'none'
								}
							});
						}, animationTime * 1000)
					}
				}
				imgListOne.style.transition = animationTime + 's ease'
			}

			//节流函数
			function throttle(fn, delay) {
				return function() {
					if (timer) {
						return
					}
					fn.apply(this, arguments)
					timer = setTimeout(() => {
						timer = null
					}, delay)
				}
			}

			nextBtn.onclick = throttle(() => cilckFun('next'), animationTime * 1000);

			lastBtn.onclick = throttle(() => cilckFun('last'), animationTime * 1000);
		</script>
		<!-- 轮换js结束 -->
		<!-- 主体结束 -->
		<!-- footer开始 -->
		<footer class="page-footer">
			&copy;小阳版权所有
			<h2>联系我</h2>
			<p>联系电话:15025264629</p>
			<p>邮箱：2382164305@qq.com</p>
			<p>地址：云南省文山州丘北县</p>
		</footer>
		<!--footer结束-->
	</body>
</html>